<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡与动画</title>
    <script src="lib/vue.js"></script>
    <style>
        /* 单元素/组件的过渡 */
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s;
        }

        .fade-enter,
        .fade-leave-to

        /* .fade-leave-active below version 2.1.8 */
            {
            opacity: 0;
        }


        /*CSS过渡*/
        /* 可以设置不同的进入和离开动画 */
        /* 设置持续时间和动画函数 */
        .slide-fade-enter-active {
            transition: all .3s ease;
        }

        .slide-fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .slide-fade-enter,
        .slide-fade-leave-to

        /* .slide-fade-leave-active for below version 2.1.8 */
            {
            transform: translateX(10px);
            opacity: 0;
        }

        /* CSS 动画 */
        .bounce-enter-active {
            animation: bounce-in .5s;
        }

        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }

        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.5);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <!-- https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E8%BF%87%E6%B8%A1 -->
    <div id="demo">
        <p>单元素/组件的过渡</p>
        <button v-on:click="show = !show">
            Toggle
        </button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>

        <hr>
        <p>CSS 过渡</p>
        <div id="example-1">
            <button @click="transit = !transit">
                Toggle render
            </button>
            <transition name="slide-fade">
                <p v-if="transit">hello</p>
            </transition>
        </div>

        <hr>
        <p>CSS 动画</p>
        <div id="example-2">
            <button @click="cartoon = !cartoon">Toggle show</button>
            <transition name="bounce">
                <p v-if="cartoon">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero,
                    at
                    lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
            </transition>
        </div>

    </div>


    <script>
        new Vue({
            el: "#demo",
            data: {
                show: true,
                transit: true,
                cartoon: true
            }
        })
    </script>

</body>

</html>